<template>
    <div class="footer">

        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[10, 20, 50, 100, 150, 200]" :page-size="10"
                layout="total, sizes, prev, pager, next, jumper" :total='total'>
                <!-- 默认显示多少条page-size   总数显示多少条total-->
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    // props: ["page", 'pageSize', 'total', 'pageSizes'],
    // 对象写法  可以定义传参的类型
    props: {
        page: {//当前页码
            default() { return },
            type: Number
        },
        pageSize: {//当前页码显示的条数
            default() { return 10 },
            type: Number
        },
        total: {//总数
            default() { return 0 },
            type: Number
        },
        pageSizes: {//每页多少条
            default() { return [10, 20, 50, 100, 150, 200] },
            type: Array
        }
    },

    name: 'WorkspaceJsonMypage',

    data() {
        return {
            currentPage4: 1,//控制当前是哪页/
            // multipleSelection: []
        };
    },

    mounted() {

    },

    methods: {
        //分页
        handleSizeChange(val) {//控制每一页显示多少条
            console.log(`每页 ${val} 条`);
            this.$emit('changepageSize', val)
        },
        handleCurrentChange(val) {//控制当前页码
            console.log(`当前页: ${val}`);
            this.$emit('changePage', val)
        },
    },
};
</script>

<style lang="less" scoped>
.footer {
    height: 90px;
    background-color: #fff;
    box-shadow: 1px 3px rgba(182, 189, 202, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    justify-content: end;

    div {
        margin-left: 20px;
    }

    .deleteAll {
        width: 15px;
        height: 15px;
    }

    button {
        width: 100px;
        height: 30px;
        box-shadow: 0px 2px rgba(153, 151, 151, 0.603);
        background-color: #6669ff;
        font-size: 16px;
        color: #fff;
        border-color: #409EFF;
        line-height: 30px;
        // margin-left: 710px;
        border-radius: 4px;
        text-align: center;
    }
}
</style>